<template>
	<view>
	    <view class="collection"  v-for="(item, index) in imageList"
             :key="index">
	  <!--  <text>
	      下拉框
	    </text>    -->
	    <view id="img">
	      <image mode="widthFix"  :src="item.src">  
	      </image>
	     <!-- <text>《动物世界》</text> -->
	    </view>
	    <view id="c_content">
	         <view id="content">
	         <text>{{item.name}}</text>
	      <uni-icons type="locked" color="#D3D3D3"></uni-icons>
	         </view>       
	    </view>
	    <view id="content_last">
	         <image :src="item.src"></image>
	         <text>{{item.text}}</text>
	         <text id="num">{{item.num}}</text>
	        </view>
	<view>
	<uni-pagination :show-icon="true" :total="4" />
	 </view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList:[
					{
					id:1,
					name:'呵呵',
					fans:100,
					src:'http://rco8i11co.hn-bkt.clouddn.com/1.jpg'	,
					text:'《动物世界》',
					num:'x1'
					},
					{
					id:2,
					name:'呵呵1',
					fans:50,
					src:'http://rco8i11co.hn-bkt.clouddn.com/2.jpg'	,
					text:'《动物世界2》',
					num:'x1'
					},
					// {
					// id:3,
					// name:'呵呵2',
					// fans:100,
					// src:'http://rco8i11co.hn-bkt.clouddn.com/3.jpg'	,
					// text:'《动物世界2》'
					// },
					// {
					// id:4,
					// name:'呵呵3',
					// fans:200,
				 //    src:'http://rco8i11co.hn-bkt.clouddn.com/4.jpg'	,
					// text:'《动物世界2》'
					// },
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.collection{
	margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 750rpx;
   /* background-color: pink; */
}
#img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:auto;
}
#img text{
    display: flex;
    justify-content: center;
    background-color:red;
    border-radius: 15px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    margin-left: 5px;
    margin-top: -30px;   
}
#c_content{
    display: flex;
    flex-direction: row;
 /*   background-color: blueviolet; */
}
#content{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}
#content :first-child{
	display: flex;
	justify-content: space-around;
     padding-right:90px;
    margin-left: 20px;
    box-sizing: border-box;
}
#content :last-child{  
    /* display: flex;  */
    /* padding-left: 60px; */
    box-sizing: border-box;
}
#content_last{
    display: flex;
    flex-direction: row;
    justify-self: start;
    margin-left: 20px;
}
#content_last image{
    display: flex;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    margin-left: 30px;
    border-radius: 40px;
}
#content_last>text{
    display: flex;
    justify-content: space-around;
    padding-left: 5px;
    margin-top: 12px;
    box-sizing: border-box;
}
#content_last #num{
    padding-left: 115px;
    box-sizing: border-box;
	color:#D5C8C7 ;
}
</style>
